<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>注册用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet"
          th:href="@{/resource/layui/css/layui.css}"
          media="all">
    <script type="text/javascript"
            th:src="@{/resource/js/jquery-3.6.0.min.js}"></script>

</head>
<body>

<fieldset class="layui-elem-field layui-field-title"
          style="margin-top: 20px;">
    <legend>注 册 用 户</legend>
</fieldset>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="username" lay-verify="username"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">请输入4到12位的用户名</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" lay-verify="pass"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">请填写4到12位密码</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-inline">
            <input type="password" name="passwordTrue" lay-verify="pass"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">请再次填写密码</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
            <input type="text" name="nickname" lay-verify="nickname"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">请输入2到16位的昵称</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked="">
            <input type="radio" name="sex" value="女" title="女">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-inline">
            <input type="text" name="age" lay-verify="age"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">请输入年龄</div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit=""
                    lay-filter="submitButton">立即提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script th:src="@{/resource/layui/layui.js}"
        charset="utf-8"></script>

<script>
    layui
        .use(
            ['form', 'layedit'],
            function () {
                var form = layui.form, layer = layui.layer, laydate = layui.laydate;

                //自定义验证规则
                form.verify({
                    username: function (value) {
                        if (value.length < 4) {
                            return '用户名至少需要4个字符';
                        } else if (value.length > 12) {
                            return '用户名不能超出12个字符';
                        }
                    },
                    pass: [/^[\S]{4,12}$/, '密码必须4到12位，且不能出现空格'],
                    nickname: [/^[\S]{2,16}$/, '昵称必须2到16位，且不能出现空格'],
                    age: function (value) {
                        if (value < 0) {
                            return '年龄不能小于0';
                        } else if (value > 200) {
                            return '年龄不能大于200';
                        } else if (/^\d+$/.test(value) == false) {
                            return '年龄必须是整数'
                        }
                    }
                });

                //监听提交
                form.on('submit(submitButton)', function (data) {
                    $.post("adds", data.field, function (obj) {
                        if (obj.result == 1) {
                            layer.msg(obj.msg, {
                                icon: 1,
                                time: 2000
                            });
                            return false;
                        } else {
                            layer.msg(obj.msg, {
                                icon: 2,
                                time: 2000
                            });
                            return false;
                        }
                    });

                    return false;
                });

            });
</script>

</body>
</html>